<template>
  <div id="map">
    <div id="container"></div>

    <div class="input-card-map" style='width: 10rem;' >
      <el-radio v-for="layer in layerArrays"
                :key="layer.id"
                v-model="mapLayerIndex"
                :label="layer.id"
                :disabled="!canChangeLayer">{{layer.name}}</el-radio>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {MyMapOpt} from "@/class/map/myMapOpt";
import {Layer} from "@/class/map/Layer";
import {mapMutations, mapState} from "vuex";
let geolocation
export default {
  data(){
    return{
      mapLayerIndex:0,
      //图层数组
      layerArrays:[],
      map:null,
    }
  },
  name: "AMapView",
  props:["updateMap","updateCoordsy","canChangeLayer"],
  methods: {
    // region 初始化数据
    /**
     * 添加数据、加载地图
     */
    initMap() {
      AMapLoader.load({
        key: "99df1adfafd916e84e7b953d75c626d7",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.MouseTool'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        try {
          let map = new AMap.Map("container", {  //设置地图容器id
            // viewMode:"3D",    //是否为3D地图模式
            zoom: 10,           //初始化地图级别
            // center:[105.602725,37.076636], //初始化地图中心点位置
          });
          this.map = map;
          this.updateMap(map)
          this.initLayer()
        }catch(e)
        {
          console.log(e)
        }
      }).catch(e => {
        console.log(e);
      })

    },
    /**
     * 初始化地图图层
     */
    initLayer(){
      let amapTitleLayer = new AMap.TileLayer();
      let amapSatellite = new AMap.TileLayer.Satellite();
      this.layerArrays.push({
        id: 0,
        name: "默认",
        layer: amapTitleLayer,
        coordSys: MyMapOpt.MapCoordSys.CJ02
      })
      this.layerArrays.push({
        id: 1,
        name: "高德",
        layer: amapSatellite,
        coordSys: MyMapOpt.MapCoordSys.CJ02
      })
      Layer.getLayer().then(result=>{
        result.forEach(item=>{
          let url=item.url
          this.layerArrays.push({
            id: this.layerArrays.length,
            name: item.name,
            layer: new AMap.TileLayer({
              zIndex: 3,
              getTileUrl: function (x, y, z) {
                let tempurl
                tempurl=url.replace('${x}',x)
                tempurl=tempurl.replace('${y}',y)
                tempurl=tempurl.replace('${z}',z)
                return tempurl
              }
            }) ,
            coordSys: item.coordsys
          })
        })
      })
      this.mapLayerIndex=0
    },
    //endregion
  },
  watch:{
    mapLayerIndex: {
      handler(newval, oldVal){
        if(newval===0){
          this.map.remove(this.layerArrays[oldVal].layer)
          this.updateCoordsy(MyMapOpt.MapCoordSys.CJ02)
        }else{
          this.updateCoordsy(this.layerArrays[newval].coordSys)
          this.map.add(this.layerArrays[newval].layer)
          this.map.remove(this.layerArrays[oldVal].layer)
        }
      }
    },
  },
  mounted() {
    this.initMap();
  }
}
</script>

<style scoped>

#map{

  width: 100%;
  position: relative;
  height: 70vh;
}
#container{
  height: 100%;
}

.input-card-map{
  position: absolute;
  bottom:2px;

  right:1px;
  /*margin-right: 1px;*/
  width: 200px;
  /*height: 100px;*/
  /*border: 3px solid #73AD21;*/
}
</style>